<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="点击输入医院名称"/>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="searchObj.reserveDateBegin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.reserveDateEnd"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()"
      >查询
      </el-button
      >
    </el-form>

    <div class="chart-container">
      <div
        id="chart"
        ref="chart"
        class="chart"
        style="height: 500px; width: 100%"
      />
    </div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import statisticsApi from "@/api/sta";

  export default {
    data() {
      return {
        searchObj: {
          hosname: "",
          reserveDateBegin: "",
          reserveDateEnd: "",
        },
        btnDisabled: false,
        chart: null,
        title: "",
        xData: [], // x轴数据
        yData: [], // y轴数据
      };
    },

    methods: {
      // 初始化图表数据
      showChart() {
        statisticsApi.getCountMap(this.searchObj).then((response) => {
          this.yData = response.data.countList;
          this.xData = response.data.dateList;
          this.setChartData();
        });
      },

      setChartData() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("chart"));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: this.title + "挂号量统计",
          },
          tooltip: {},
          legend: {
            data: [this.title],
          },
          xAxis: {
            data: this.xData,
          },
          yAxis: {
            minInterval: 1,
          },
          series: [
            {
              name: this.title,
              type: "line",
              data: this.yData,
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
    },
  };
</script>
